Закладки

Тренды веб-дизайна

Приемы и принципы веб-дизайна, которые помогут вам создать современный сайт.
Когда мы говорим о веб-дизайне, то имеет смысл обращать внимание на все возможности, которые предоставляет интернет. Поэтому в статье речь пойдет о приемах и принципах, которые касаются и содержания сайта, и его внешнего вида, и поведения пользователя, а также общих направлений развития отрасли.
1

Контент — это главное

Было время, когда дизайн сайта воспринимался как творчество. Дизайнеры старались впечатлить пользователя с помощью графики и эффектов. Сейчас веб-сайт — это в первую очередь информация.
Разрабатывая сайты, дизайнеры ориентируются на контент: что нужно сказать? И, уже исходя из этого, рисуют интерфейс.
Контент — это и текст сам по себе, и внимательное отношение к редактированию содержания — что человек читает, как и какой объем он способен усвоить.
Пример хорошей подачи содержания. Скриншот сайта buro247.ru
Большой, монотонный текст в интернете воспринимаются тяжело. При этом потребность в информации никуда не исчезла. Поэтому нужна специальная работа над подачей материала: где-то разбавить, сделать паузу, где-то сократить, разбить на части и добавить заголовки. То же касается и визуальной части — более серьезное отношение к фотографии, видео, иллюстрации, инфографики. Все это должно не украшать текст, а помогать понять мысль, которую вы хотите донести до читателя.
Пример хорошей подачи текста: страница не перегружена спецэффектами, но информация легко воспринимается за счет уместных иллюстраций, выделения названия раздела и заголовка и разбиения на абзацы.
2

Сторителлинг

Сразу же ремарка: в данном случае сторителлинг мы рассматриваем не с точки зрения сюжета, не как попытку воспроизвести законы театра или кино. Под сторителлингом мы понимаем то, что люди начали рассказывать о себе. Если раньше было достаточно написать небольшой формальный текст, то сейчас появилось желание рассказать о себе подробнее.
«Сторителлинг» дизайн-студии Gin Lane из Нью-Йорка.
Раньше дизайнеры выкладывали несколько макетов в портфолио, подписывали название проекта, указывали заказчика и, в лучшем случае, обозначали цель. Сейчас принято рассказывать из каких этапов состоял процесс дизайна, кто участвовал, какие были найдены интересные решения и почему в итоге получилось так, как есть.
Описание рабочего процесса разработки раздела «Расходы» в интернет-банке «Альфа-Клик». Студия FunkyPunky.
В бизнесе такая же ситуация. Если компания — эксперт, то она не просто обозначает это дежурными фразами, а раскрывает причины и доказывает, почему ее сотрудники профессионалы своего дела. Рассказывает основные принципы и этапы работы, объясняет, чем она отличается от других и почему ее услуги столько стоят.

В онлайн-журналистике неслучайно стал популярным формат лонгрида. Когда материал действительно интересный, то хочется не просто выложить текст с картинками, а подойти к подаче осознанно и сделать значимый продукт.

35 лонгридов с отличным дизайном

Список лучших лонгридов с комментариями дизайнеров команды Tilda Publishing
3

Типографика

Веб-дизайн и графический дизайн теперь не так различаются, как раньше. Веб-дизайнеры изучают основы графического дизайна, а графические дизайнеры осваивают веб.
Важно относится с умом к оформлению контента и использовать приемы из графического дизайна. Большие заголовки, использование ультратонких начертаний шрифтов, интересные комбинации шрифтов, которые задают стиль сайту — все то, что раньше было характерно для печати, перешло в веб и адаптировалось под новый формат.
Недостаточно просто выложить кусок текста — нате, читайте!
Контент должен быть хорошо оформлен. Принципы традиционной типографики видоизменились, нашли свою уникальную методику, но тем не менее легко проследить источники, откуда что взялось. Например, разбиение на заголовки, выделение лида и ключевых фраз — абсолютно газетно-журнальная традиция, но сейчас это используют все — от онлайн-изданий до лэндингов.
4

Простота и ясность

Теперь, когда скорость интернета настолько высокая, людей раздражает, если сайт загружается более 4-х секунд. Но в интернете есть и другой параметр скорости — насколько быстро считывается информация.
Дизайнеры, которые перегружают сайт лишними элементами, замедляя восприятие информации вызывают не меньшее раздражение, чем зависающая страница.
Простой дизайн легко сканируется и информация хорошо усваивается. Причина популярности плоского дизайна в том, что пользователи стали более восприимчивы и менее терпеливыми. Простота и ясность — вот что нужно современному человеку, перегруженному информацией.
5

Цвет в веб-дизайне

Важный тренд — пристальное внимание к цвету. Цветные поверхности работают не хуже, чем фотография, видео или иллюстрация. Раньше к цвету не относились так серьезно. Цвет брали из фирменного стиля компании или просто использовали какой-то синий, красный, зеленый. Сейчас цветом оперируют более тонко. Дизайнеры ищут уникальные оттенки. Не просто зеленый, а какой-то особенный, запоминающийся зеленый. Не слишком бледный, яркий, темный, блеклый или блеклый, но на грани.
Все стремится к лаконичности, современный человек перегружен, он устал. А цвет — это просто. Это такая супербазовая единица, как буква. Как пустое пространство.
Все чаще вместо фоновых фотографий или видео ставят классный градиент или чистый цвет и поверх уже пишут текст. И это работает не хуже, а иногда и лучше, чем фотография. Хороший прием, чтобы создать уникальный вид.

Ресурсы, которые помогут подобрать цвет

color.adobe.com
Онлайн-приложение, которое помогает подбирать, создавать и сохранять цветовые схемы.
uigradients.com
Коллекция цветных градиентов для использования в дизайне и программировании.
6

Измеряемость дизайна

Современные технологии позволяют использовать конкретные параметры для оценки дизайна. Если раньше руководствовались творческим видением дизайнера или заказчика — я так вижу, и этого было достаточно, то сейчас дизайн стал измеряемым.

Корректировки вносятся не на основе мнения, а в результате исследований. Даже банальное количество шеров влияет на выбор тем для последующих материалов. Появилась возможность очень быстро получать обратную связь и корректировать редакционную политику в зависимости от того, какие материалы пользуются популярностью.
Материал можно считать прочитанным, если человек долистал до определенного места страницы — от 200 до 800 пикселей от начала. Замеряется это с помощью счетчика, например Scroll Depth.
Отслеживание путей пользователей на сайте с помощью Google Analytics.
Чтобы измерить аудиторию печатного издания и понять предпочтения, проводят дорогостоящее социологическое исследование, которое, к тому же, занимает кучу времени. В случае с онлайн-изданиями аналитика поступает мгновенно и относительно доступна. К ней относятся: общее количество посещений, количество отказов, дочитываемость материала. Для бизнес страниц добавляются параметры: конверсия (в регистрации, заказы, звонки), А/Б тестирование и глубинное интервью.
А/Б тестирование — метод, при котором трафик в случайном порядке распределяется между двумя страницами. Таким образом сравнивается контрольная страница и тестовая — на которой один или несколько параметров изменены. Это позволяет оценивать эффективность и управлять ею.

Глубинное интервью — спланированная, но неформальная беседа, которая позволяет получить развернутые и обстоятельные ответы на интересующие исследователя вопросы.
7

Адаптивный дизайн

Адаптивный дизайн учитывает как сайт выглядит на самых разных экранах, это не только проектирование мобильной версии сайта.

Если раньше было достаточно одной контрольной точки, в которой дизайн перестраивается, то сейчас такой точки нет, нужно для каждой ширины смотреть, как адаптировать сайт, потому что устройства все очень разные.

«Мобильные» не значит мобильные

Мобильные устройства используются везде, а в большей степени — дома.

Доля мобильных устройств растет, потребление контента смещается в зону мобильного. Более того, «мобильный» не означает, что этим устройством пользуются только на ходу. Если раньше предполагалось, что мобильная версия должна быть менее функциональной, по сравнению с десктопной, потому что когда человек смотрит что-то с телефона, это короткий и поверхностный контакт. Но исследования говорят о том, что люди используют мобильный телефон для выхода в интернет не только в дороге.
Источник: Ofcom
Мобильная версия и десктопная версии сайта теперь имеют абсолютно равный вес. Исчезает такое понятие, как урезанная мобильная версия. На любом устройстве сайт должен быть полноценным
8

Плоский дизайн

В настоящее время любой дизайн можно назвать плоским, потому что это большой базовый тренд.

Отдельно выделим иллюстрацию — она сейчас популярна. Это и картинки, и пиктографика, и иконографика. Иллюстрация увеличивает скорость считывания интерфейса, поэтому там, где ее можно использовать, ее используют.
Плоский дизайн стал базовым трендом на фоне общего стремления увеличить скорость восприятия информации.

Material Design

Развитием версии плоского дизайна стала концепция материального дизайна компании Google.
Материальный дизайн — это попытка переосмыслить дизайн физического мира и интерпретировать его в дизайне интерфейса. Интерфейс (поля ввода, кнопки, меню) должен быть говорящим и отзывчивым. В этом принципиальное отличие от скевоморфизма, когда элементы всего лишь стилизовались под реальный мир.
В физическом мире каждое действие имеет обратную связь: нажал кнопку, что-то произошло. Эта отзывчивость перешла в веб — кликнул на кнопку, она чуть видоизменилась. Другой пример — важные или частоиспользуемые предметы мы всегда держим под рукой. В вебе это проявляется в том, что наиболее значимые элементы выделяются сильнее других, так, чтобы их невозможно было пропустить. Например, кнопка «написать новый пост» — круглая, яркая, чуть не в сетке — ее всегда видно.
Отзывчивость на действия пользователя — базовый принцип материального дизайна.
9

Морфинг

Морфинг (англ. morphing — трансформировать) — прием, когда происходит трансформация одного элемента управления в другой. Изменение является реакцией на действие пользователя: кликнул и кнопка превращается в индикатор загрузки или в форму регистрации, иконка поиска разъехалась и стала полем для ввода.
10

Микроанимация

Анимация вернулась, но в новом качестве. Был период, когда было много флеш-анимации и избыток визуальных эффектов. Но люди довольно быстро в это наигрались, потому что это был эффект ради эффекта, оформительство.

Сейчас у анимации функциональная роль, ее задача не просто понравиться, а привнести смысл. То есть если пользователь нажимает на кнопку, то она должна отреагировать, чтобы показать: да, интерфейс тебя понял, он не заглючил, не завис, что-то произошло. Анимация помогает работать с интерфейсом, чтобы он был более отзывчивым и более человечным.
Изображения пользователей dribbble, слева направо: Bryant Jow, Xjw,
m—2—h
Два базовых правила: анимация должна помогать и не должна тормозить работу сайта.
Когда анимация отсутствует вовсе, человеку скучно, потому что реальный мир интереснее. Но перегружать тоже нельзя. Еще момент: любая анимация тормозит, а если теряется скорость, то это сводит на нет все усилия. Поэтому появился такой принцип, когда анимируются только мелкие вещи. Так, чтобы не перерисовывать всю страницу.
11

Обложка

Обложка — первое, что видит человек, когда попадает на сайт. «Обложка» — самый распространенный термин для обозначения этого элемента. Недавно появилось новое название — Hero Image, что довольно точно передает суть этого блока. Потому что главная задача обложки — впечатлить человека, создать настроение и что-то продать (в широком смысле).
Большинство хороших сайтов начинается с обложки. Это может быть фоновая классная фотография, иллюстрация, видео, параллакс, анимация — любые выразительные приемы. Иногда это просто цвет и отличная типографика — они также способны впечатлить человека.
Так как основная задача обложки — создать настроение и сообщить человеку, что его ждет, то она не должна быть перегружена информацией. Только самое важное: заголовок сайта, логотип компании, название статьи.
12

Плитка

Плитка, как и обложка, стала неотъемлемой частью многих сайтов. Плитка — универсальный инструмент, который позволяет отлично структурировать контент. Это очень удобно, поэтому встречается часто. С помощью плитки можно показать список работ, разделов, ссылки на другие материалы, ключевые особенности.
Все, что является списком, можно показать плиткой.
Плитка может быть неоднородной. Ключевые элементы ставят крупнее, сопутствующие мельче. Если одна фотография очень классная, а две других дополнительные, то они образуют комбинацию.
13

Разбиение информации на блоки

Весь процесс создания сайтов стал похож на подготовку презентации — дизайнеры разбивают информацию на смысловые блоки и каждый из них оформляют. Поэтому это очень похоже на дизайн обычной презентации, только без ограничения по высоте — не обязательно все стараться уместить на А4.
Изменения потребления информации повлекло за собой отказ от многоколонночности. Несколько колонок перегружали пользователя и он терял фокус, не понимал что читать — статью или то, что висит справа. Сложно одновременно рассказывать и про команду, и про принципы работы. Информацию нужно выдавать последовательно.
Последовательность — новый сценарий чтения страниц.
14

Реакция на скролл

В настоящее время часто используется продюсирование появления тех или иных элементов, в зависимости от того места, где находится читатель.

Что это может быть?

Видоизменение меню: человек пролистывает страницу и исчезают ссылки на разделы, а остается только самая главная кнопка — «зарегистрироваться».
Всплывающие окна: листаешь статью и в какой-то момент всплывает окно: «подпишитесь на рассылку».

Автодоводчик скроллинга: при послайдовом листании смена слайдов происходит с автоматическим доскролливанием от одного слайда до следующего.
«Залипающая картинка». Если текста много, а иллюстрация относится ко всему разделу, то можно закрепить картинку, а текст будет пролистываться.

Изменение цвета фона. Хороший прием, для обозначения начала нового раздела.
15

Сначала скроллинг, затем клики

Если раньше старались вместить всю информацию на первый экран, боялись что люди не будут скроллить и не увидят что написано ниже, то теперь напротив — обложку максимально разгрузили и вообще перестали бояться делать длинные страницы.
Люди научились скроллить.
Важный момент — чем больше кликов, тем больше падает конверсия. Каждый клик — это отсев потенциальных клиентов. Поэтому вместо того, чтобы размещать информацию в разных разделах, информацию размещают на одной странице — скроллить проще, чем кликать. Каждый клик — это пауза, а все же спешат. Перед каждым кликом происходит микрозадержка — пользователю приходится подумать: нажимать не нажимать? Плюс перегружается страница.
Пролистать страничку до конца совсем не сложно, поэтому стало обычным всю информацию размещать на одной странице и использовать меню для навигации внутри нее.
Раньше разбивку на разделы можно было оправдать плохой скоростью, но сейчас со скоростью проблем нет, можно загружать сколько угодно. Зачем ходить по разделам: о нас, команда и контакты, если все это можно быстро прочитать на одной странице.

Скроллить все привыкли — воспитание социальных сетей. Скроллишь и не задумываешься. Единственный момент — потеря концентрации, человеку стало сложно фокусироваться, он не вчитывается в то, что просматривает. Это нужно учитывать, и помогать с точки зрения интерфейса и дизайна, так, чтобы это не превратилось в зомби-скроллинг.
Фото: ibilezombie.tumblr.com

Также в этом курсе

6
Виды исследований
Как с помощью исследования превратить неорганизованный творческий процесс в технологичную цепочку действий, которые приводят к предсказуемому результату.
Предыдущая
8
Развитие визуального вкуса и получение нового опыта
Какие качества нужно развивать дизайнеру, чтобы добиться профессионального роста.
Следующая
Оглавление

© Обухов Н.В., 2015 Все права защищены. Перепечатка и цитирование материалов — только с разрешения автора.

По всем вопросам пишите на hello@tilda.cc